<template>
  <div class="seller-header">
      <div class="top">
        <div class="top-left">
            <img class="avatar" :src="seller.avatar" alt="">
        </div>
        <div class="top-right">
            <div class="title">
                <i class="brand"></i>
                <span class="name">{{seller.name}}</span>
            </div>
            <div class="delivery">
                <span class="info">{{seller.description}}/{{seller.deliveryTime}}分钟送达</span>
            </div>
            <div class="supports">
                <seller-icon class="icon" 
                size="1" :type="iconType"
                ></seller-icon>
                <span class="text" v-if="seller.supports && seller.supports[0]">
                    {{seller.supports[0].content}}
                </span>
            </div>
         </div>
         <div class="btns" @click="showMask=true">
            <span class="count" v-if="seller.supports">{{seller.supports.length}}个</span>
            <i class="seller-keyboard_arrow_right arrow_right"></i>
         </div>
      </div>
      <div class="bottom"  @click="showMask=true">
          <i class="icon"></i>
          <span class="text">{{seller.bulletin}}</span>
          <i class="seller-keyboard_arrow_right arrow_right"></i>
      </div>
      <div class="bg">
          <img :src="seller.bgImg">
      </div>
      <transition name="mask">
          <div class="mask" v-show="showMask">
              <div class="contentWrap">
                <!-- 遮罩内容 -->
                  <div class="content">
                      <div class="title">
                          <!-- <span>你的快乐粥（幸福园）</span> -->
                          <span>{{seller.name}}</span>
                      </div>
                      <div class="starsWrap">
                           <span size="48" :score="seller.score"></span>
                      </div>
                      <seller-line class="line">
                           <span>优惠信息</span>
                      </seller-line>
                      <seller-list :supports="seller.supports"></seller-list>
                      <seller-line class="line">
                           <span>商家公告</span>
                      </seller-line>
                      <p class="bulletin">
                            {{seller.bulletin}}
                      </p>
                      
                  </div>
              </div>
              <div class="footer">
                  <i class="seller-close close" @click="showMask=false"></i>
              </div>
          </div>
      
      </transition> 
      

  </div>
</template>

<script>
import {mapState} from "vuex"
import list from "components/List"
import stars from "components/stars/stars"
export default {
  name: "seller-header",
  data(){
    return {
        showMask:false
    }
  },
  computed:{
    ...mapState(["seller"]),
    /* 什么时候使用计算属性:
        1. 当需要在模板内进行大量运算的时候 最好使用计算属性
        2. 当可以明显分析属于有依赖数据的存在时 最好使用计算属性*/
    iconType(){
        return this.seller.supports && this.seller.supports[0] ? this.seller.supports[0].type :"";
    }
  },
  mounted() {
      console.log(this.$store.state.seller,"1231")
  },
  components: {
     "seller-list":list,
     "seller-stars":stars
     
  },
};
</script>

<style scoped lang='stylus'>
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/extend.styl"
  .seller-header
      background rgba(7,17,27,0.2)
      position relative
      overflow hidden
      & > .top
          padding  24px 12px 18px
          display flex
          position relative
          .top-left
              width 64px
              height 64px
              margin-right 16px
              .avatar
                  width 100%
                  height 100%
          .top-right
              color rgba(255, 255, 255,1)
              .title
                  display flex
                  align-items center
                  font-size 16px
                  font-weight bold
                  line-height 18px
                  margin-top 2px
                  margin-bottom 8px
                  .brand
                      bg-image(brand)
                      background-repeat no-repeat
                      background-size 100%
                      display inline-block
                      width 30px
                      height 18px
                  .name
                      margin-left 6px     
              .delivery
                  font-size 12px
                  font-weight 200
                  line-height 12px
                  .info
                      zoom 1
              .supports
                  display flex
                  align-items center
                  font-size 10px
                  font-weight 200
                  margin-top 10px
                  margin-bottom 2px
                  .text
                      margin-left 4px
                  .icon
                                           
                      zoom 1
          .btns
              position absolute
              align-items center
              right 12px
              bottom 37px
              height 24px
              width 45px
              line-height 12px
              font-size 10px
              font-weight 200
              background rgba(0,0,0,0.2)
              color rgba(255,255,255,1)
              display flex
              justify-content space-around
              border-radius 10px
              .count
                  zoom 1
                  position relative
                  left 4px
              .grrow_right
                  zoom 1
      & > .bottom
          box-sizing border-box
          width 100%
          height 28px
          padding 0px 26px 0 12px
          background rgba(7,17,27,.2)
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          color rgba(255,255,255,1)
          line-height 28px
          font-size 10px
          font-weight 200
          position relative
          .icon
              bg-image(bulletin)
              background-size 100%
              background-repeat no-repeat
              display inline-block
              width 22px
              height 12px
              margin-right 4px
              position relative
              top 1px
          .text
              zoom 1
          .arrow_right
              position absolute
              right 12px
              top 8px
      & > .bg 
          position absolute
          left 0
          right 0
          top 0
          bottom 0
          background pink
          z-index -1
          filter blur(3px)
          img 
              width 100%
              height 100%
      & > .mask
          position fixed
          left 0
          right 0
          top 0
          bottom 0
          margin auto
          z-index 9
          backdrop-filter blur(10px)
          background rgba(7,17,27,.7)
          overflow auto
          .contentWrap
              @extend .clearfix
              min-height 100%
              .content
                  @extend .clearfix
                  padding-bottom 96px 
                  padding-top 64px
                  text-align center
                  .title
                      text-align center
                      font-size 16px
                      line-height 16px
                      color rgba(255,255,255,1)
                      font-weight 700
                  .starsWrap
                      width 80%
                      margin 0 auto
                      margin-top 16px
                      margin-bottom 28px
                      text-align center
                      background pink
                  .line
                      width 80%
                      margin 0 auto
                  .bulletin
                        width 80%
                        margin 0 auto
                        margin-top 24px
                        box-sizing border-box
                        padding 0 12px
                        color white
                        font-size 15px
                        line-height 24px

          .footer
              margin-top -96px
              width 100%
              height 96px  
              line-height 96px
              text-align center
              .close 
                  font-size 32px
                  color rgba(255,255,255,0.5) 
                  
                  



              


</style>